const { Tree, Icon, Button, Row, Col } = antd;
const { TreeNode } = Tree;

const transTreeData = (data) => {
    return data.map(item => {
        return Object.assign({}, item, {
            title: item.id+":"+item.name,
            key: item.id,
            isLeaf: false
        });
    });
};
class MiApiTree extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            expandedKeys: [],
            autoExpandParent: true,
            curRecord: {},
            checkedKeys: [],
            selectedKeys: [],
            value2: 'Apple',
            department_id: '',
            display: 'none',
            treeData: [],
            parent_id:-1
        };
        M.M_MiApiTree_this=this;
    }

    componentDidMount() {
        MIO.miApiListByPage({parent_id:-1,startPage:1,limit:9999}).then(d=>{
            this.setState({treeData: transTreeData(d.rows)})
        })
    }
    onExpand =async (expandedKeys, expanded) => {

       // console.log("AAAAAAA",expandedKeys,expanded)
        this.setState({
            expandedKeys,
            expanded,
            autoExpandParent: false,
        });
    };

    onSelect = (selectedKeys, info) => {
        let parent_id = -1;
        if(info.selectedNodes.length>0){
            parent_id=info.selectedNodes[0].props.dataRef.id
        }
        M.M_MiApiTree_this.state=parent_id;
        this.setState({parent_id:parent_id}, M.MiApi_this.flush(parent_id))
       
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.name} key={item.id} dataRef={item} data-key={item.id} data-title={item.categoryName} >
                        {this.renderTreeNodes(item.childrens)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} dataRef={item} />;
        });

    onLoadData =async treeNode => {
        MIO.miApiListByPage({parent_id:treeNode.props.dataRef.id,startPage:1,limit:9999}).then(d=>{
            treeNode.props.dataRef.children = transTreeData(d.rows);
            let cidList=treeNode.props.dataRef.children.map(u=>u.id.toString());
            //console.log("cidList",cidList)
            this.state.expandedKeys=this.state.expandedKeys.filter(u=>!cidList.includes(u))
            //console.log("this.state.expandedKeys", this.state.expandedKeys)
            this.setState(
                {
                     treeData: [...M.M_MiApiTree_this.state.treeData],
                      autoExpandParent: true,
                    expandedKeys:this.state.expandedKeys
               })
        })
        
    }

    flush=()=>{
        MIO.miApiListByPage({parent_id:-1,startPage:1,limit:9999}).then(d=>{
            this.setState(
                {
                     treeData: transTreeData(d.rows), 
                     autoExpandParent: false, 
                     expandedKeys:[]
               })
        })
    }
    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} {...item} dataRef={item} />;
        });

        componentWillUnmount(){
            this.setState = (state, callback) => {
              return;
            }
        }

    render() {
        return (
            <div>
                <Row>
                    <Col span={6}> 
                     <Button onClick={()=>this.setState({parent_id:null}, M.MiApi_this.flush(null))}>全部</Button>
                     <Tree
                        autoExpandParent={false}
                        loadData={this.onLoadData}
                        expandedKeys={this.state.expandedKeys}
                        onSelect={this.onSelect}
                        onExpand={this.onExpand}
                    >{this.renderTreeNodes(this.state.treeData)}
                    </Tree>
                    </Col>
                    <Col span={18}><MiApi parentFlush={this.flush} parent_id={this.state.parent_id}/></Col>
                </Row>
            </div>
        );
    }
}
